<script setup name="frame">
import { ref, reactive, computed, onMounted } from "vue";
import { Expand, Fold } from "@element-plus/icons-vue";
import { useAuthStore } from "@/stores/auth";
import { useRouter } from "vue-router";
import authHttp from "@/api/authHttp";
import { ElMessage } from "element-plus";

const authStore = useAuthStore();
const router = useRouter();

let defaultActive = ref("home");
let isCollapse = ref(false);
let dialogVisible = ref(false);
let formLabelWidth = "100px";
let formTag = ref();

let resetPwdForm = reactive({
  oldPwd: "",
  newPwd1: "",
  newPwd2: "",
});

let displayUser = reactive({
  department: {},
  realname: "",
});

let rules = reactive({
  oldPwd: [
    { required: true, message: "请输入旧的密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度范围6到20位", trigger: "blur" },
  ],
  newPwd1: [
    { required: true, message: "请输入新的密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度范围6到20位", trigger: "blur" },
  ],
  newPwd2: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度范围6到20位", trigger: "blur" },
  ],
});

let asideWith = computed(() => {
  if (isCollapse.value) {
    return "64px";
  } else {
    return "250px";
  }
});

const onCollapseAside = () => {
  isCollapse.value = !isCollapse.value;
};

const onLogOut = () => {
  authStore.clearUserToken();
  router.push({ name: "login" });
};

const onResetPwdFormDialog = () => {
  resetPwdForm.oldPwd = "";
  resetPwdForm.newPwd1 = "";
  resetPwdForm.newPwd2 = "";

  dialogVisible.value = true;
};

const onSubmit = () => {
  formTag.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        await authHttp.resetPwd(
          resetPwdForm.oldPwd,
          resetPwdForm.newPwd1,
          resetPwdForm.newPwd2
        );
        ElMessage.success("密码修改成功! ");
        dialogVisible.value = false;
      } catch (detail) {
        ElMessage.error(detail);
      }
    } else {
      ElMessage.info("按要求填写字段!")
    }
   
  });
};

onMounted(() => {
  defaultActive.value = router.currentRoute.value.name;
  displayUser.department = authStore.user.department;
  displayUser.realname = authStore.user.realname;
});
</script>

<template>
  <el-container class="container">
    <el-aside class="aside" :width="asideWith">
      <router-link to="/" class="brand"
        ><strong>OA</strong>
        <span v-show="!isCollapse">MS系统</span></router-link
      >
      <el-menu
        active-text-color="#ffd04b"
        background-color="#343a40"
        class="el-menu-vertical-demo"
        default-active="1"
        text-color="#fff"
        :collapse="isCollapse"
        :collapse-transition="false"
        :router="true"
      >
        <el-menu-item index="1" :route="{name: 'home'}">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Checked /></el-icon>
            <span>考勤管理</span>
          </template>
          <el-menu-item index="2-1" :route="{name: 'myabsent'}">
            <el-icon><UserFilled /></el-icon>
            <span>个人考勤</span>
          </el-menu-item>
          <el-menu-item index="2-2" :route="{name: 'subabsent'}">
            <el-icon><User /></el-icon>
            <span>下属考勤</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><Bell /></el-icon>
            <span>通知管理</span>
          </template>
          <el-menu-item index="3-1" :route="{name: 'inform_publish'}">
            <el-icon><CirclePlusFilled /></el-icon>
            <span>发布通知</span>
          </el-menu-item>
          <el-menu-item index="3-2" :route="{name: 'inform_list'}">
            <el-icon><List /></el-icon>
            <span>通知列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><Avatar /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item index="4-1" :route="{name: 'staff_add'}">
            <el-icon><CirclePlusFilled /></el-icon>
            <span>新增员工</span>
          </el-menu-item>
          <el-menu-item index="4-2" :route="{name: 'staff_list'}">
            <el-icon><List /></el-icon>
            <span>员工列表</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <div>
          <el-button
            v-show="isCollapse"
            :icon="Expand"
            @click="onCollapseAside"
          />
          <el-button
            v-show="!isCollapse"
            :icon="Fold"
            @click="onCollapseAside"
          />
        </div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar :size="30" icon="UserFilled" />
            <span style="margin-left: 10px">
              [{{ displayUser.department.name }}]-<strong>{{
                displayUser.realname
              }}</strong></span
            >
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="onResetPwdFormDialog"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item divided @click="onLogOut"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-main class="main"><RouterView></RouterView></el-main>
    </el-container>
  </el-container>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500">
    <el-form :model="resetPwdForm" :rules="rules" ref="formTag">
      <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldPwd">
        <el-input
          v-model="resetPwdForm.oldPwd"
          autocomplete="off"
          type="password"
        />
      </el-form-item>

      <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd1">
        <el-input
          v-model="resetPwdForm.newPwd1"
          autocomplete="off"
          type="password"
        />
      </el-form-item>

      <el-form-item
        label="确认密码"
        :label-width="formLabelWidth"
        prop="newPwd2"
      >
        <el-input
          v-model="resetPwdForm.newPwd2"
          autocomplete="off"
          type="password"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.container {
  height: 100vh;
  background-color: #f4f6f9;
}

.aside {
  background-color: #343a40;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
}

.aside .brand {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #434a50;
  background-color: #232631;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.header {
  height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}

.el-menu {
  border-right: none;
}
</style>
